<template>
  <a-modal :width="500" v-model:visible="showSetTimeDialog" title="设置计划交货日期" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <p style="margin-bottom: 20px">设置计划交货日期，让申购方知道具体的交货日期</p>
    <a-date-picker v-model="timeVal" value-format="YYYY-MM-DD" style="width: 300px" />
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { purchasePlanItemSetGmtPlanDelivery } from '@/api/purchaseApplication'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })

  const showSetTimeDialog = ref(props.isShow)
  const timeVal = ref()
  const submitLoading = ref(false)

  // 关闭
  function closedDialog() {
    timeVal.value = null
    showSetTimeDialog.value = false
    emit('closed')
  }
  // 提交
  async function submitData() {
    if (!timeVal.value) {
      Message.error('请选择时间')
      return false
    }
    const res: any = await purchasePlanItemSetGmtPlanDelivery({
      gmtPlanDelivery: timeVal.value,
      ids: props.list.map((el: any) => el.id),
    })
    if (!res) return false
    Message.success('设置成功')
    emit('success')
    closedDialog()
    return true
  }
</script>
<style lang="less" scoped></style>
